<template>
	<view class="equipment-container">
		<!-- 顶部导航栏 -->
		<view class="page-header">
			<text class="header-title">安灯检修</text>
		</view>

		<!-- 搜索框 -->
		<view class="search-container">
			<view class="search-box">
				<text class="search-icon">🔍</text>
				<input type="text" v-model="searchKeyword" class="search-input" placeholder="搜索设备编码或名称..."
					@input="handleSearchInput" @confirm="performSearch">
				<text class="clear-btn" v-if="searchKeyword" @click="clearSearch">×</text>
			</view>
		</view>

		<!-- 加载状态 -->
		<view class="loading-view" v-if="isLoading">
			<view class="spinner"></view>
			<text class="loading-text">加载审批数据中...</text>
		</view>

		<!-- 空状态 -->
		<view class="empty-view" v-if="!isLoading && filteredEquipment.length === 0">
			<text class="empty-icon">📋</text>
			<text class="empty-text">
				{{ searchKeyword ? '未找到匹配的审批项' : '暂无待审批项目' }}
			</text>
			<button class="reset-btn" v-if="searchKeyword" @click="clearSearch">
				清除搜索
			</button>
		</view>

		<!-- 审批列表 -->
		<view class="equipment-list" v-if="!isLoading && filteredEquipment.length > 0">
			<view class="equipment-item" v-for="(equipment, index) in filteredEquipment" :key="index"
				@click="openApprovalModal(equipment)">
				<view class="equipment-info">
					<view class="info-row">
						<text class="label">工单编码:</text>
						<text class="value">{{ equipment.work_order_no }}</text>
					</view>

					<view class="info-row">
						<text class="label">异常类型:</text>
						<text class="value">{{ equipment.typeObject && equipment.typeObject.ming_cheng  }}</text>
					</view>

					<view class="info-row">
						<text class="label">紧急程度:</text>
						<text class="value">{{ equipment.level || '无' }}</text>
					</view>
					<view class="info-row">
						<text class="label">上报人:</text>
						<text
							class="value">{{equipment.reporterObject && equipment.reporterObject.real_name || '无'}}</text>

					</view>
					<view class="info-row">
						<text class="label">上报时间:</text>
						<text class="value">{{ equipment.create_date }}</text>
					</view>

					<view class="info-row">
						<text class="label">异常描述:</text>
						<text class="value">{{ equipment.abnormality_description }}</text>
					</view>
					
					<view class="info-row">
						<text class="label">单据状态:</text>
						<view class="value" :class="statusClass(equipment.status)">{{ statusName(equipment.status) }}</view>
					</view>
				</view>
				<view class="arrow-icon">→</view>
			</view>
		</view>

		<!-- 安灯报警弹窗 -->
		<view class="alarm-modal" v-if="showApprovalModal">
			<view class="modal-mask" @click="closeApprovalModal"></view>
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">安灯审批</text>
					<text class="modal-close" @click="closeApprovalModal">×</text>
				</view>

				<view class="modal-body" v-if="selectedItem">
					<view class="approval-detail">
						<text class="detail-title">{{ selectedItem.work_order_no }}</text>
						<!-- <text class="detail-code">单号: {{ selectedItem.work_order_no }}</text> -->
					</view>

					<view class="form-group">
						<text class="form-label">上报人</text>
						<text
							class="form-value">{{ selectedItem.reporterObject && selectedItem.reporterObject.real_name  }}</text>
					</view>

					<view class="form-group">
						<text class="form-label">异常类型</text>
						<text
							class="form-value">{{ selectedItem.typeObject && selectedItem.typeObject.ming_cheng }}</text>
					</view>

					<view class="form-group">
						<text class="form-label">紧急程度</text>
						<text class="form-value"
							:class="urgencyClass(selectedItem.level)">{{ selectedItem.level }}</text>
					</view>

					<view class="form-group">
						<text class="form-label">异常描述</text>
						<view class="description-content">{{ selectedItem.abnormality_description }}</view>
					</view>

					<!-- 现场照片 -->
					<view class="form-group">
						<text class="form-label">现场照片</text>
						<view class="images-container"
							v-if="selectedItem.start_image && selectedItem.start_image.length">
							<view class="image-item" v-for="(img, idx) in selectedItem.start_image" :key="idx">
								<image :src="img" class="preview-img" mode="cover" @click="previewImage(idx)">
								</image>
							</view>
						</view>
						<text class="no-image" v-else>无现场照片</text>
					</view>
					
					<view class="form-group" v-if="selectedItem.status=='3'">
						<text class="form-label">处理措施 *</text>
						<input type="text" v-model="measures" class="search-input" placeholder="请填写处理措施"
					></input>
					<text class="error-hint" v-if="measuresError">{{ measuresError }}</text>
					</view>

					<!-- 审批意见 -->
					<view class="form-group">
						<text class="form-label">审批意见 *</text>
						<textarea v-model="approvalOpinion" class="opinion-input" placeholder="请输入审批意见..."
							maxlength="500"></textarea>
						<text class="word-count">{{ approvalOpinion.length }}/500</text>
						<text class="error-hint" v-if="opinionError">{{ opinionError }}</text>
					</view>
				</view>

				<view class="modal-footer">
					<button class="reject-btn" @click="handleReject">拒绝</button>
					<button class="approve-btn" @click="handleApprove">同意</button>
				</view>
			</view>
		</view>

		<!-- 报警成功提示 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 设备数据
				equipmentList: [],
				filteredEquipment: [],
				isLoading: true,
				serialNumber: "",

				// 搜索相关
				searchKeyword: '',
				searchTimer: null,
				approvalOpinion: "",
				// 报警弹窗核心数据
				showAlarmModal: false,
				selectedEquipment: null,
				isSubmitting: false,
				canSubmit: false,
				measuresError:"",
				opinionError: "",
				// 1. 上报人/处理人相关
				userList: [],
				isLoadingUser: false,
				selectedReporterIndex: -1,
				selectedReporter: null,
				selectedHandlerIndex: -1,
				selectedHandler: null,
				reporterError: '',
				showApprovalModal: false,
				// 2. 树形异常类型相关
				alarmTypeTree: [],
				flattenAlarmTypes: [],
				isLoadingAlarmType: false,
				selectedAlarmTypeIndex: -1,
				selectedAlarmType: null,
				alarmTypeError: '',

				// 3. 紧急程度相关
				urgencyLevels: [{
						label: '低',
						value: 1
					},
					{
						label: '中',
						value: 2
					},
					{
						label: '高',
						value: 3
					}
				],
				selectedUrgencyIndex: -1,
				selectedUrgency: null,
				urgencyError: '',
				currentNodes: [],
				// 4. 异常描述相关
				abnormality_description: '',
				descriptionError: '',
				taskId: "",
				measures:"",//处理措施
				// 5. 图片上传相关
				uploadedImages: [],
				imageUrls: [],
				imageUploadData: [], //上传图片数据数组

			};
		},
		onLoad() {
			// 并行请求核心接口
			Promise.all([
				this.fetchEquipmentList(),
				this.fetchUserList(),
				this.fetchAlarmTypeTree(),
				this.getSeriesNumberCode()
			]).catch(error => {
				console.error('初始化失败:', error);
				this.$nextTick(() => {
					this.$refs.toast.show({
						model: 'error',
						label: '数据加载异常，请重试'
					});
				});
			});
		},
		methods: {
			// 状态名字 和 样式
			statusClass(status){
				switch (status) {
					case 1:
						return 'status-abnormal';
					case 2:
						return 'status-running';
					case 3:
						return 'status-processing';
					case 4:
						return 'status-completed';
				}
			},
			statusName(status){
				switch(status){
					case 1:
						return '异常';
					case 2:
						return '接到通知';
					case 3:
						return '处理中';
					case 4:
						return '完成';
				}
			},
			// 请求流水号
			async getSeriesNumberCode() {
				const res = await uni.$tm.request.post("sys/menu/getSeriesNumberCode", {
					"code": "abnormal_order",
					"tableName": "device_abnormal_order",
					"fieldName": "work_order_no",
					"data": {
						"reporter": "1135149058143338488",
						"level": "低",
						"abnormality_description": "",
						"start_image": [],
						"start_time": null,
						"handling_measures": "",
						"end_image": [],
						"end_time": null,
						"handling_time": "",
						"divider-1757318310612": "展示文字",
						"chao_shi_fen_zhi": false,
						"start_imageObject": [],
						"end_imageObject": []
					}
				})
				if (res.code == 0) {
					this.serialNumber = res.data.join('')
				}
			},
			// 验证审批意见
			validateOpinion() {
				if (!this.measures.trim() && this.selectedItem.status=='3') {
					this.measuresError = '请输入处理措施';
					return false;
				}
				if (!this.approvalOpinion.trim()) {
					this.opinionError = '请输入审批意见';
					return false;
				}
				this.measuresError = ''
				this.opinionError = '';
				return true;
			},
			//处理同意
			async handleApprove() {
				if (!this.validateOpinion()) return;
				try {
					const params = Object.assign(this
						.selectedItem, {
							"handlingOpinions": this.approvalOpinion,
							"_task_id_": this.taskId,
							"processInstanceId": this.selectedItem._process_instance_id_,
							"processTitle": this.selectedItem.processTitle,
							"appCode": "device",
							"taskId": this.taskId,
							"code": "abnormal_order",
							"businessKey": this.selectedItem.id,
						})
					if(this.selectedItem.status=='3'){
						uni.$tm.request.post("workflow/engine/operation/updateData",{data:Object.assign(params,{"handling_measures":this.measures}),taskId:this.taskId})
					}
					const res = await uni.$tm.request.post("workflow/engine/operation/pass", params)
					if (res.code == 0) {
						this.$refs.toast.show({
							model: 'success',
							label: '审批成功'
						});
					} else {
						this.$refs.toast.show({
							model: 'error',
							label: res.msg || '审批提交失败'
						});
					}

				} catch (error) {
					this.$refs.toast.show({
						model: 'error',
						label: res.message || '审批提交失败'
					});
				} finally {
					this.fetchEquipmentList()
					this.showApprovalModal = false
				}
			},
			closeApprovalModal() {
				this.showApprovalModal = false;
				this.selectedItem = null;
			},
			// 提交审批结果
			async submitApproval(status) {
				if (!this.selectedItem || this.isSubmitting) return;

				this.isSubmitting = true;
				try {
					const approvalData = {
						id: this.selectedItem.id,
						status: status,
						approval_opinion: this.approvalOpinion,
						approver: uni.getStorageSync('userInfo').id // 当前审批人ID
					};

					const res = await uni.$tm.request.post('app/device/form/abnormal_order/approve', approvalData);

					if (res.code === 0) {
						this.$refs.toast.show({
							model: 'success',
							label: status === 2 ? '审批通过' : '已拒绝'
						});
						this.closeApprovalModal();
						// 重新加载列表
						this.fetchApprovalList();
					} else {
						this.$refs.toast.show({
							model: 'error',
							label: res.message || '审批提交失败'
						});
					}
				} catch (error) {
					this.$refs.toast.show({
						model: 'error',
						label: '网络异常，请重试'
					});
				} finally {
					this.isSubmitting = false;
				}
			},

			urgencyClass(level) {
				switch (level) {
					case '高':
						return 'urgency-high';
					case '中':
						return 'urgency-medium';
					case '低':
						return 'urgency-low';
					default:
						return '';
				}
			},

			// 处理拒绝
			async handleReject() {
				if (!this.validateOpinion()) return;
				try {
					const res = await uni.$tm.request.post('workflow/engine/operation/reject', Object.assign(this
						.selectedItem, {
							"handlingOpinions": this.approvalOpinion,
							"_task_id_": this.taskId,
							"processInstanceId": this.selectedItem._process_instance_id_,
							"processTitle": this.selectedItem.processTitle,
							"appCode": "device",
							"taskId": this.taskId,
							"code": "abnormal_order",
							"businessKey": this.selectedItem.id,
						}))
					if (res.code == 0) {
						this.$refs.toast.show({
							model: 'success',
							label: res.message
						});
					} else {
						this.$refs.toast.show({
							model: 'error',
							label: res.message || '审批提交失败'
						});
					}
				} catch (error) {
					this.$refs.toast.show({
						model: 'error',
						label: res.message || '审批提交失败'
					});
				} finally {
					this.fetchEquipmentList()
					this.showApprovalModal = false
				}

			},
			// -------------------------- 设备列表相关 --------------------------
			async fetchEquipmentList() {
				this.isLoading = true;
				try {
					const res = await uni.$tm.request.post('app/device/form/abnormal_order/page', {
						page: 1,
						limit: 100,
						keyword: this.searchKeyword.trim(),
						condition: [{
								"connect": "AND",
								"fieldName": "handler",
								"type": "eq",
								"value": uni.getStorageSync('userInfo').id
							},
							{
								"connect": "AND",
								"fieldName": "_process_status_",
								"type": "eq",
								"value": "2"
							}
						]
					});

					if (res.code === 0 && res.data?.list) {
						this.equipmentList = res.data.list
						this.filteredEquipment = [...this.equipmentList];
					} else {
						this.$refs.toast.show({
							model: 'error',
							label: '设备数据加载失败'
						});
						this.equipmentList = [];
						this.filteredEquipment = [];
					}
				} catch (error) {
					this.$refs.toast.show({
						model: 'error',
						label: '网络异常，请重试'
					});
					this.equipmentList = [];
					this.filteredEquipment = [];
				} finally {
					this.isLoading = false;
				}
			},

			handleSearchInput() {
				if (this.searchTimer) clearTimeout(this.searchTimer);
				this.searchTimer = setTimeout(() => this.performSearch(), 300);
			},

			performSearch() {
				this.fetchEquipmentList();
			},

			clearSearch() {
				this.searchKeyword = '';
				this.fetchEquipmentList();
			},

			async openApprovalModal(equipment) {
				this.selectedItem = equipment;
				// this.approvalOpinion = '';
				this.opinionError = '';
				const id = equipment.id;
				const processID = equipment._process_instance_id_;
				try {
					const abnormalDetailRes = await uni.$tm.request.post(
						`app/device/form/abnormal_order/detail/${id}` // 拼接ID到URL
					);
					this.taskId = abnormalDetailRes.data._task_id_
					const flowTaskRes = await uni.$tm.request.post(
						'workflow/engine/flowTask/detail', {
							"processInstanceId": processID,
							"taskId": abnormalDetailRes.data._task_id_
						}
					);
					this.currentNodes = flowTaskRes.data.currentNodes
				} catch (error) {
					console.error('请求失败:', error.message);
				}

				this.showApprovalModal = true;

			},

			// -------------------------- 用户列表相关 --------------------------
			async fetchUserList() {
				this.isLoadingUser = true;
				try {
					const res = await uni.$tm.request.post('app/sys/form/user/page', {
						page: 1,
						limit: 200,
						_is_deleted_: false
					});

					if (res.code === 0 && res.data?.list) {
						this.userList = res.data.list;
					} else {
						this.$refs.toast.show({
							model: 'error',
							label: '用户数据加载失败'
						});
					}
				} catch (error) {
					this.$refs.toast.show({
						model: 'error',
						label: '用户数据请求异常'
					});
				} finally {
					this.isLoadingUser = false;
				}
			},

			handleReporterChange(e) {
				const index = e.detail.value;
				this.selectedReporterIndex = index;
				this.selectedReporter = this.userList[index];
				if (this.selectedHandlerIndex === -1) {
					this.selectedHandlerIndex = index;
					this.selectedHandler = this.userList[index];
				}
				this.validateForm();
			},
			handleHandlerChange(e) {
				const index = e.detail.value;
				this.selectedHandlerIndex = index;
				this.selectedHandler = this.userList[index];
			},

			// -------------------------- 树形异常类型相关 --------------------------
			async fetchAlarmTypeTree() {
				this.isLoadingAlarmType = true;
				try {
					const res = await uni.$tm.request.post('app/device/form/yclx/tree', {
						"orderField": "create_date",
						"order": "desc",
						"limit": 50,
						"page": 1,
						"_is_deleted_": false,
						"source": 1
					});

					if (res.code === 0 && res.data) {
						this.alarmTypeTree = res.data;
						this.flattenAlarmTypes = this.flattenTree(res.data); // 扁平化树形数据
					} else {
						this.$refs.toast.show({
							model: 'error',
							label: '异常类型加载失败'
						});
					}
				} catch (error) {
					this.$refs.toast.show({
						model: 'error',
						label: '异常类型请求异常'
					});
				} finally {
					this.isLoadingAlarmType = false;
				}
			},

			// 树形数据扁平化（支持无限层级，带缩进显示）
			flattenTree(tree, level = 0) {
				let result = [];
				const indent = '　'.repeat(level); // 中文空格实现层级缩进
				tree.forEach(item => {
					// 处理当前节点
					result.push({
						id: item.id,
						label: `${indent}${item.ming_cheng}`,
						value: item.id
					});

					// 递归处理子节点
					if (item.children && item.children.length > 0) {
						result = result.concat(this.flattenTree(item.children, level + 1));
					}
				});

				return result;
			},

			handleAlarmTypeChange(e) {
				const index = e.detail.value;
				this.selectedAlarmTypeIndex = index;
				this.selectedAlarmType = this.flattenAlarmTypes[index];
				this.validateForm();
			},

			// -------------------------- 紧急程度相关 --------------------------
			handleUrgencyChange(e) {
				const index = e.detail.value;
				this.selectedUrgencyIndex = index;
				this.selectedUrgency = this.urgencyLevels[index];
				this.validateForm();
			},

			// -------------------------- 图片上传相关 --------------------------
			chooseImage() {
				// 选择图片（适配uni-app API）
				uni.chooseImage({
					count: 5 - this.uploadedImages.length, // 剩余可上传数量
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						// 保存临时路径
						this.uploadedImages = [...this.uploadedImages, ...res.tempFilePaths];
						// 如需上传服务器，可在此处调用上传接口
						this.uploadToServer(res.tempFilePaths);
					}
				});
			},

			// 预览图片
			previewImage(index) {
				uni.previewImage({
					urls: this.uploadedImages,
					current: index
				});
			},

			// 删除图片
			deleteImage(index) {
				this.uploadedImages.splice(index, 1);
				// 如果有上传到服务器，需要同步删除服务器图片
			},

			// 上传图片到服务器（示例方法）
			uploadToServer(tempPaths) {
				let that = this
				for (const tempPath of tempPaths) {
					try {
						uni.uploadFile({
							url: 'https://gnber.kinfy.com/api/sys/file/upload',
							filePath: tempPath,
							name: 'file',
							header: {
								'token': uni.getStorageSync('token'), // 携带 token
							},
							success(uploadFileRes) {
								const result = JSON.parse(uploadFileRes.data);
								if (result.code === 0 && result.data?.url) {
									that.imageUploadData.push(result.data)
									that.imageUrls.push(result.data.url);
								} else {
									that.$refs.toast.show({
										model: 'error',
										label: '图片上传失败'
									});
								}
							}
						})

					} catch (error) {
						that.$refs.toast.show({
							model: 'error',
							label: '图片上传异常'
						});
					}
				}
			},

			// -------------------------- 表单验证与提交 --------------------------
			// 重置表单
			resetAlarmForm() {
				this.selectedReporterIndex = -1;
				this.selectedReporter = null;
				this.selectedAlarmTypeIndex = -1;
				this.selectedAlarmType = null;
				this.selectedUrgencyIndex = -1;
				this.selectedUrgency = null;
				this.abnormality_description = '';
				this.uploadedImages = [];
				this.imageUrls = [];

				// 重置错误提示
				this.reporterError = '';
				this.alarmTypeError = '';
				this.urgencyError = '';
				this.descriptionError = '';
				this.canSubmit = false;
			},

			// 表单验证
			validateForm() {
				let isValid = true;

				// 验证上报人
				if (!this.selectedReporter) {
					this.reporterError = '请选择上报人';
					isValid = false;
				} else {
					this.reporterError = '';
				}

				// 验证异常类型
				if (!this.selectedAlarmType) {
					this.alarmTypeError = '请选择异常类型';
					isValid = false;
				} else {
					this.alarmTypeError = '';
				}

				// 验证紧急程度
				if (!this.selectedUrgency) {
					this.urgencyError = '请选择紧急程度';
					isValid = false;
				} else {
					this.urgencyError = '';
				}

				// 验证异常描述
				if (!this.abnormality_description.trim()) {
					this.descriptionError = '请输入异常描述';
					isValid = false;
				} else if (this.abnormality_description.length < 5) {
					this.descriptionError = '描述不能少于5个字符';
					isValid = false;
				} else {
					this.descriptionError = '';
				}

				this.canSubmit = isValid;
			},

			// 提交报警信息
			async submitAlarm() {
				if (!this.canSubmit || !this.selectedEquipment) return;
				this.isSubmitting = true;
				const alarmData = {
					status: 1, //状态
					reporter: this.selectedReporter.id, //上报人
					type: this.selectedAlarmType.id, //异常类型
					level: this.selectedUrgency.label, //紧急程度
					abnormality_description: this.abnormality_description, //异常描述
					handler: this.selectedHandler.id, //处理人
					start_image: this.imageUploadData.map(itm => itm.id), //现场照片
					start_imageObject: this.imageUploadData // 现场照片
				}
				try {
					// 提交报警信息
					const saveRes = await uni.$tm.request.post('app/device/form/abnormal_order/save', alarmData);

					if (saveRes.code === 0) {
						// 第一个接口成功后，获取返回的businessId（假设从saveRes.data中返回）
						const businessId = saveRes.data; // 根据实际返回字段调整
						// 第二个接口：提交工作流操作
						const workflowRes = await uni.$tm.request.post('workflow/engine/operation/submit', {
							businessId: businessId, // 使用第一个接口返回的业务ID
							menuId: "1964944105231454210" // 固定菜单ID
						})
						if (workflowRes.code === 0) {
							this.$refs.toast.show({
								model: 'success',
								label: '报警提交成功并触发工作流'
							});
							this.closeAlarmModal();
						} else {
							this.$refs.toast.show({
								model: 'error',
								label: `工作流提交失败: ${workflowRes.message}`
							});
						}
					} else {
						this.$refs.toast.show({
							model: 'error',
							label: res.message || '报警提交失败'
						});
					}
				} catch (error) {
					this.$refs.toast.show({
						model: 'error',
						label: '网络异常，请重试'
					});
				} finally {
					this.isSubmitting = false;
				}
			},

			// 关闭弹窗
			closeAlarmModal() {
				this.showAlarmModal = false;
			},
		}
	};
</script>

<style scoped>
	.urgency-high {
		color: #ff4d4f;
	}

	.urgency-medium {
		color: #faad14;
	}

	.urgency-low {
		color: #52c41a;
	}

	.equipment-container {
		min-height: 100vh;
		background-color: #f5f7fa;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	}

	/* 顶部导航 */
	.page-header {
		padding: 20px 16px;
		background-color: #ffffff;
		border-bottom: 1px solid #eee;
	}

	.header-title {
		font-size: 18px;
		font-weight: 600;
		color: #1e293b;
	}
	
	/* 状态样式 */
	/* 异常 */
	.status-abnormal{
		color:#d33d65 !important;
	}
	/*  */
	.status-running {
		color: #398cff !important;
		/* 接到通知 */
	}
	.status-processing {
		color: #ed9f3a !important;
		/* 处理中*/
	}
	
	.status-completed{
		color: #67ac5b !important;
		/* 灰色 - 停机 */
	}
	
	
	/* 搜索框 */
	.search-container {
		padding: 12px 16px;
		background-color: #ffffff;
		border-bottom: 1px solid #f1f5f9;
	}

	.search-box {
		display: flex;
		align-items: center;
		background-color: #f5f7fa;
		border-radius: 8px;
		padding: 0 12px;
		height: 40px;
	}

	.search-icon {
		color: #94a3b8;
		font-size: 16px;
		margin-right: 8px;
	}

	.search-input {
		flex: 1;
		height: 100%;
		font-size: 14px;
		background: transparent;
		border: none;
		outline: none;
	}

	.modal-footer {
		display: flex;
		justify-content: space-around;
		padding: 20rpx;
	}

	.approve-btn {
		background-color: #52c41a;
		color: white;
		width: 40%;
	}

	.reject-btn {
		background-color: #ff4d4f;
		color: white;
		width: 40%;
	}

	.clear-btn {
		color: #94a3b8;
		font-size: 16px;
		width: 20px;
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.opinion-input {
		width: 95%;
		min-height: 150rpx;
		padding: 15rpx;
		border: 1px solid #ddd;
		border-radius: 8rpx;
		margin-top: 10rpx;
	}

	/* 加载状态 */
	.loading-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60px 20px;
	}

	.spinner {
		width: 30px;
		height: 30px;
		border: 3px solid #e2e8f0;
		border-top-color: #3b82f6;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	.loading-text {
		font-size: 14px;
		color: #64748b;
		margin-top: 15px;
	}

	/* 空状态 */
	.empty-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80px 20px;
		text-align: center;
	}

	.empty-icon {
		font-size: 48px;
		margin-bottom: 20px;
		color: #94a3b8;
	}

	.empty-text {
		font-size: 16px;
		color: #64748b;
		margin-bottom: 20px;
	}

	.reset-btn {
		padding: 8px 16px;
		background-color: #3b82f6;
		color: #ffffff;
		border: none;
		border-radius: 8px;
		font-size: 14px;
	}

	/* 设备列表 */
	.equipment-list {
		padding: 10px 16px;
	}

	.equipment-item {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	.equipment-item:hover {
		background-color: #f8fafc;
	}

	.info-row {
		display: flex;
		margin-bottom: 6px;
	}

	.info-row:last-child {
		margin-bottom: 0;
	}

	.label {
		font-size: 14px;
		color: #64748b;
		width: 80px;
	}

	.value {
		font-size: 14px;
		color: #1e293b;
		flex: 1;
		word-break: break-all;
	}

	.arrow-icon {
		color: #94a3b8;
		font-size: 18px;
	}

	/* 报警弹窗 */
	.alarm-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.modal-content {
		position: relative;
		width: 90%;
		max-width: 400px;
		background-color: #ffffff;
		border-radius: 16px;
		overflow: hidden;
		max-height: 90vh;
		display: flex;
		flex-direction: column;
	}

	.modal-header {
		padding: 16px 20px;
		border-bottom: 1px solid #f1f5f9;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.modal-title {
		font-size: 18px;
		font-weight: 600;
		color: #1e293b;
	}

	.modal-close {
		font-size: 20px;
		color: #94a3b8;
		cursor: pointer;
	}

	.modal-body {
		padding: 20px;
		overflow-y: auto;
		flex: 1;
	}

	.equipment-detail {
		margin-bottom: 20px;
		padding-bottom: 15px;
		border-bottom: 1px solid #f1f5f9;
	}

	.detail-title {
		font-size: 18px;
		font-weight: 600;
		color: #1e293b;
		display: block;
		margin-bottom: 5px;
	}

	.detail-code {
		font-size: 14px;
		color: #64748b;
	}

	.form-group {
		margin-bottom: 20px;
	}

	.form-label {
		font-size: 14px;
		color: #475569;
		display: block;
		margin-bottom: 8px;
	}

	.select-wrapper {
		border: 1px solid #e2e8f0;
		border-radius: 8px;
		overflow: hidden;
	}

	.picker-view {
		padding: 0 12px;
		height: 44px;
		display: flex;
		align-items: center;
		font-size: 16px;
		color: #1e293b;
	}

	.picker-placeholder {
		color: #94a3b8;
	}

	.description-input {
		width: 100%;
		min-height: 100px;
		padding: 12px;
		border: 1px solid #e2e8f0;
		border-radius: 8px;
		font-size: 14px;
		color: #1e293b;
		box-sizing: border-box;
		resize: none;
	}

	.word-count {
		font-size: 12px;
		color: #94a3b8;
		display: block;
		text-align: right;
		margin-top: 5px;
	}

	.error-hint {
		font-size: 12px;
		color: #ef4444;
		margin-top: 5px;
		display: block;
	}

	/* 图片上传样式 */
	.upload-container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.uploaded-list {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.uploaded-item {
		width: 80px;
		height: 80px;
		position: relative;
		border-radius: 8px;
		overflow: hidden;
	}

	.uploaded-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.delete-img {
		position: absolute;
		top: -5px;
		right: -5px;
		width: 20px;
		height: 20px;
		background-color: rgba(239, 68, 68, 0.9);
		color: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		cursor: pointer;
	}

	.upload-btn {
		width: 80px;
		height: 80px;
		border: 1px dashed #cbd5e1;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #94a3b8;
		cursor: pointer;
		transition: border-color 0.2s;
	}

	.upload-btn:hover {
		border-color: #3b82f6;
	}

	.upload-icon {
		font-size: 20px;
		margin-bottom: 5px;
	}

	.upload-text {
		font-size: 12px;
	}

	.upload-hint {
		font-size: 10px;
		margin-top: 3px;
	}

	.upload-hint-text {
		font-size: 12px;
		color: #94a3b8;
		margin-top: 5px;
		display: block;
	}

	.modal-footer {
		display: flex;
		padding: 15px 20px;
		border-top: 1px solid #f1f5f9;
		gap: 10px;
	}

	.cancel-btn {
		flex: 1;
		padding: 12px;
		background-color: #f1f5f9;
		color: #64748b;
		border: none;
		border-radius: 8px;
		font-size: 16px;
	}

	.confirm-btn {
		flex: 1;
		padding: 12px;
		background-color: #ef4444;
		color: #ffffff;
		border: none;
		border-radius: 8px;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}

	.confirm-btn:disabled {
		background-color: #fecaca;
		cursor: not-allowed;
	}

	/* 提交按钮加载动画 */
	.btn-spinner {
		width: 16px;
		height: 16px;
		border: 2px solid rgba(255, 255, 255, 0.5);
		border-top-color: white;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	/* 动画 */
	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>